﻿// Mix-ins
.borderRadius(@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.boxShadow(@boxShadow) {
  -moz-box-shadow: @boxShadow;
  -webkit-box-shadow: @boxShadow;
  box-shadow: @boxShadow;
}

.opacity(@opacity) {
  @opacityPercent: @opacity * 100;
  opacity: @opacity;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
  filter: ~"alpha(opacity=@{opacityPercent})";
}

.wordWrap(@wordWrap: break-word) {
  -ms-word-wrap: @wordWrap;
  word-wrap: @wordWrap;
}

// Variables
@black: #000000;
@grey: #999999;
@light-grey: #CCCCCC;
@white: #FFFFFF;
@near-black: #030303;
@green: @brand-success;
@red: @brand-danger;
@blue: @brand-info; //#2F96B4;
@orange: @brand-warning;

// Styles
.toast-title {
  font-weight: bold;
  margin-bottom: @base-padding/2;
}

.toast-message {
  .wordWrap();

  a,
  label {
    color: @white;
  }

  a:hover {
    color: @light-grey;
    text-decoration: none;
  }
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: @white;
  //-webkit-text-shadow: 0 1px 0 rgba(255,255,255,1);
  //text-shadow: 0 1px 0 rgba(255,255,255,1);
  .opacity(0.8);

  &:hover,
  &:focus {
    //color: @black;
    text-decoration: none;
    cursor: pointer;
    .opacity(1);
  }
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

//#endregion

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
  margin-top: @default-padding/2;

  .toast {
    margin-bottom: @default-padding/2 !important;
  }
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;

  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  > div {
    margin: 0 0 6px;
    padding: @base-padding + 2 @default-padding/2;
    width: 300px;
    margin-bottom: @base-padding;
    .borderRadius(@border-radius-base);
    background-position: 15px center;
    background-repeat: no-repeat;
    color: @white;
    .opacity(0.8);
    //.transition(~"opacity 150ms ease-in-out");

    i {
      margin-right: @base-padding - 4;
    }
  }

  > :hover {
    //.boxShadow(0 0 12px @black);
    .opacity(1);
    cursor: pointer;
  }

  > .toast-info {
    //background-image: url("") !important;
  }

  > .toast-error {
    //background-image: url("") !important;
  }

  > .toast-success {
    //background-image: url("") !important;
  }

  > .toast-warning {
    //background-image: url("") !important;
  }

  /*overrides*/

  &.toast-top-full-width > div,
  &.toast-bottom-full-width > div {
    width: 96%;
    margin: auto;
  }
}

.toast {
  background-color: @near-black;
  //.box-shadow(0px 0px 0px 5px fade(@near-black, 10%));
}

.toast-success {
  background-color: @green;
  //.box-shadow(0px 0px 0px 5px fade(@green, 10%));
}

.toast-error {
  background-color: @red;
  //.box-shadow(0px 0px 0px 5px fade(@red, 10%));
}

.toast-info {
  background-color: @blue;
  //.box-shadow(0px 0px 0px 5px fade(@blue, 10%));
}

.toast-warning {
  background-color: @orange;
  //.box-shadow(0px 0px 0px 5px fade(@orange, 10%));
}

.toast-default > div {
  background-color: fade(@brand-primary, 80%);
}

/*Responsive Design*/

@media all and (max-width: 240px) {
  #toast-container {

    > div {
      padding: 8px 8px 8px 50px;
      width: 11em;
    }

    & .toast-close-button {
      right: -0.2em;
      top: -0.2em;
    }
  }
}

@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container {
    > div {
      padding: 8px 8px 8px 50px;
      width: 18em;
    }

    & .toast-close-button {
      right: -0.2em;
      top: -0.2em;
    }
  }
}

@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container {
    > div {
      padding: 15px 15px 15px 50px;
      width: 25em;
    }
  }
}